<template>
  <view class="page-content">
    <f-navbar title="设置"></f-navbar>
    <view class="setting-box">
      <view class="cell">
        <view
          class="cell-item flex justify-between"
          v-for="(item, index) in menuList"
          :key="index"
          @click="goLink(item.url)"
          v-if="checkPermi(item.permission)" 
        >
          <view class="cell-item_title">{{ item.label }}</view>
          <u-icon name="arrow-right" color="#000" size="26rpx"></u-icon>
        </view>
      </view>
      <view class="login-btn">
        <u-button
          color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
          :customStyle="{
            width: '635rpx',
            height: '83rpx',
            fontSize: '34rpx',
            borderRadius: '50rpx',
            fontWeight: 'bold',
          }"
          @click="loginOutTip"
          >退出登录
        </u-button>
      </view>
    </view>
    <customShowModal
      ref="customShowModal"
      @confirm="loginOut"
    ></customShowModal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          label: "关于平台",
          url: `./richText?type=aboutUs`,
          permission: ['index:config:platform']
        },
        {
          label: "常见问题",
          url: `./richText?type=problem`,
          permission: ['index:config:question']
        },
        {
          label: "修改密码",
          url: `./modifyPassword`,
          permission: ['index:config:resetpwd']
        },
      ],
    };
  },
  methods: {
    loginOutTip() {
      this.$refs.customShowModal.showModal({
        content: "确认要退出登录吗？",
        btnRightText: "退出登录",
      });
    },
    loginOut() {
      this.$store.commit("setUserInfo", null);
      uni.$u.toast("已退出登录");
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/login/index",
        });
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.setting-box {
  padding: 32rpx;

  .cell {
    padding: 0 32rpx;
    border-radius: 17rpx;
    background: #ffffff;

    .cell-item {
      padding: 32rpx 0;
      border-bottom: 1rpx solid #efefef;
      &:last-child {
        border: none;
      }
      .cell-item_title {
        font-size: 32rpx;
        color: #000000;
      }
    }
  }

  .login-btn {
    margin-top: 166rpx;
  }
}
</style>
